<template>
  <div class="cursor-pointer flex items-center">

    <n-avatar v-if="rowSrc" :src="rowSrc"></n-avatar>
    <n-icon v-else size="30">
      <icon :icon="rowIcon"></icon>
    </n-icon>
    <div v-if="row.isEdit">
      <n-input ref="inputRef" v-model:value="newName" @blur="handleEdit" @keydown.enter="handleEdit">
        <template #suffix>
          {{ row.size ? (getFileType(row.name) ? '.' + getFileType(row.name) : '') : '' }}
        </template>
      </n-input>
    </div>
    <div v-else>
      {{ row.name }}
    </div>
  </div>
</template>

<script setup lang="ts">

import {computed, nextTick, PropType, ref, watch, watchEffect} from "vue";
import {getFileTitle, getFileType} from "@/utils";
import {Icon} from "@iconify/vue";
import {useUserStore} from "@/store/user";
import {storeToRefs} from "pinia";

const userStore = useUserStore()
const {token} = storeToRefs(userStore);

const props = defineProps({
  row: {
    type: Object as PropType<IFileInfo>,
    default: {}
  }
})

const newName = ref('')
const emits = defineEmits(['editFinish'])

const inputRef = ref()
watch(props, () => {
  if (props.row.isEdit) {
    newName.value = getFileTitle(props.row.name)
    nextTick(() => {
      inputRef.value.focus()
      inputRef.value.select()
    })
  }
})
const rowIcon = computed(() => {
  if (!props.row.size) {
    return 'flat-color-icons:folder'
  } else {
    let extension = getFileType(props.row.name)
    if (extension === 'pdf') {
      return 'vscode-icons:file-type-pdf2'
    } else if (extension === 'doc' || extension === 'docx') {
      return 'vscode-icons:file-type-word2'
    } else if (extension === 'xls' || extension === 'xlsx') {
      return 'vscode-icons:file-type-excel2'
    } else if (extension === 'ppt' || extension === 'pptx') {
      return 'vscode-icons:file-type-powerpoint2'
    } else if (extension === 'mp4') {
      return 'icon-park-outline:video'
    } else if (extension === 'jpg' || extension === 'png' || extension === 'jpeg') {
      return 'icon-park-twotone:pic'
    } else if (extension === 'md') {
      return "bxs:file-md"
    } else if (extension === 'zip') {
      return "bi:file-zip-fill"
    }

    return 'flat-color-icons:file'
  }
})

const rowSrc = ref('')

const fetchRowSrc = async () => {
  if (props.row.size) {
    if (getFileType(props.row.name) === 'jpg' || getFileType(props.row.name) === 'png' || getFileType(props.row.name) === 'jpeg') {
      const res = await fetch(props.row.path!, {
        method: 'GET',
        headers: {
          'Authorization': token.value,
        }
      });
      if (res.status === 404) {
        rowSrc.value = '';
      } else {
        rowSrc.value = res.url + '?Authorization=' + token.value;
      }
    }
  } else {
    rowSrc.value = '';
  }
};
watchEffect(() => {
  fetchRowSrc();
});
const handleEdit = () => {
  if (props.row.isEdit) {
    props.row.isEdit = false
    emits('editFinish', props.row, newName.value + (props.row.size ? (getFileType(props.row.name) ? '.' + getFileType(props.row.name) : '') : ''))
  }
}

</script>

<style scoped>

</style>